﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.CustomPage = true;
    ViewBag.Title = "F12 Berlinetta Ferrari";
}
<style>
    .page-content img {
        width: 100%;
        display: block;
    }
    .section-top, .section-1, .section-2, .section-3, .section-4 {
        position: relative;
    }
    .page-content .section-top img {
        width: 50%;
        margin-left: 50%;
    }
    .section-top .content {
        width: 42%;
        float: left;
        padding: 0 4%;
        font-size: 16px;
        padding-top: 5%;
        margin-bottom: 25px;
    }
    .page-content .section-5 {
        margin: 50px 0;
    }
    .page-content .section-5 img {
        width: auto;
        float: right;
        margin-right: 55px;
    }
    .page-content .section-5 .content {
        margin-right: 250px;
        font-size: 16px;
        margin-left:35px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .section-1-text {
        padding: 25px 10%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #333;
        position: absolute;
        bottom: 0;
        font-weight: bold;
    }
    .section-1-text .background {
        background: url(/Content/Images/footer-badge-bg.png) 100% no-repeat #bbb;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.45;
        top:0;
        left: 0;
    }
    .section-1-text .background2 {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfdff+0,28343b+100&amp;0.4+0,0.4+100 */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top,  rgba(252,253,255,0.4) 0%, rgba(40,52,59,0.4) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,253,255,0.4)), color-stop(100%,rgba(40,52,59,0.4))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(252,253,255,0.4) 0%,rgba(40,52,59,0.4) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(252,253,255,0.4) 0%,rgba(40,52,59,0.4) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(252,253,255,0.4) 0%,rgba(40,52,59,0.4) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(252,253,255,0.4) 0%,rgba(40,52,59,0.4) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66fcfdff', endColorstr='#6628343b',GradientType=0 ); /* IE6-8 */

        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
    }
    .section-1-text .content {
        position:relative;
        z-index: 1;
    }
    .section-1 .btn {
        bottom: 15%;
        opacity: 0.9;
        width: 41.1%;
        right: 2.8%;
        font-size: 20px;
        font-weight: bold;
        position: absolute;
    }
    .section-2-text{
        color: #fff;
        background: #000;
        background: rgba(0,0,0,0.3);
        padding: 25px;
        position: absolute;
        width: 45%;
        bottom: 10%;
        left: 5%;
    }
    .section-2-text h3{
        font-size: 18px;
        font-weight: bold;
        margin-top: 0;
    }
    .section-3 .btn {
        margin: auto;
        bottom: 15%;
        opacity: 0.9;
        width: 50%;
        left: 0;
        right: 0;
        font-size: 20px;
        font-weight: bold;
        position: absolute;
    }
    .section-4 .no-padding {
        padding: 0;
    }
    .section-4 h3 {
        text-align: center;
        font-weight: bold;
    }
    .section-4 a {
        color: #333;
    }
    .section-4-buttons .btn-red{
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f14f5e+0,a4081e+100 */
        background: rgb(241,79,94); /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top,  rgba(241,79,94,1) 0%, rgba(164,8,30,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,79,94,1)), color-stop(100%,rgba(164,8,30,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(241,79,94,1) 0%,rgba(164,8,30,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(241,79,94,1) 0%,rgba(164,8,30,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(241,79,94,1) 0%,rgba(164,8,30,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(241,79,94,1) 0%,rgba(164,8,30,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f14f5e', endColorstr='#a4081e',GradientType=0 ); /* IE6-8 */
        color: #fff;
        border: 1px solid transparent;
        border-top: 1px solid #fff;
        font-size: 16px;
        line-height: 30px;
        border-radius: 5px;
        padding-left: 35px;
        padding-right: 35px;
        box-shadow:rgba(0,0,0,0.4) 1px 1px 5px;
        position: absolute;
        bottom: 12%;
        width: 22%;
        left: 5%;
    }
    .section-4-buttons .btn-red:hover {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fc8587+0,f20c0f+100 */
        background: rgb(252,133,135); /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top,  rgba(252,133,135,1) 0%, rgba(242,12,15,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,133,135,1)), color-stop(100%,rgba(242,12,15,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(252,133,135,1) 0%,rgba(242,12,15,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(252,133,135,1) 0%,rgba(242,12,15,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(252,133,135,1) 0%,rgba(242,12,15,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(252,133,135,1) 0%,rgba(242,12,15,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8587', endColorstr='#f20c0f',GradientType=0 ); /* IE6-8 */
    }
    .section-4-buttons .btn-blue{
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,1e5799+100 */
        background: rgb(125,185,232); /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top,  rgba(125,185,232,1) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-8 */

        color: #fff;
        border: 1px solid transparent;
        border-top: 1px solid #fff;
        font-size: 16px;
        line-height: 30px;
        border-radius: 5px;
        padding-left: 35px;
        padding-right: 35px;
        box-shadow:rgba(0,0,0,0.4) 1px 1px 5px;
        position: absolute;
        bottom: 12%;
        width: 22%;
        left: 30%;
    }
    .section-4-buttons .btn-blue:hover {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#93ccf2+0,4e80ad+100 */
        background: rgb(147,204,242); /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top,  rgba(147,204,242,1) 0%, rgba(78,128,173,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,204,242,1)), color-stop(100%,rgba(78,128,173,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(147,204,242,1) 0%,rgba(78,128,173,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(147,204,242,1) 0%,rgba(78,128,173,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(147,204,242,1) 0%,rgba(78,128,173,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(147,204,242,1) 0%,rgba(78,128,173,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93ccf2', endColorstr='#4e80ad',GradientType=0 ); /* IE6-8 */


    }
    @@media only screen and (max-width: 991px)
    {
        .section-1-text{
            position: relative;
        }
        .section-4-buttons {
            background:#333;
            text-align: center;
            padding: 25px 0;
        }
        .section-4-buttons .btn-red, .section-4-buttons .btn-yellow {
            position: relative;
            width: auto;
            left: auto;
            display: inline-block;
            margin: 0 15px;
        }
    }
    @@media only screen and (max-width: 768px)
    {
        .section-2-text{
            position: relative;
            background: #333;
            padding: 25px 10%;
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            bottom: auto;
            right: auto;
        }
    }
    @@media only screen and (max-width: 510px) {
        .section-4-buttons .btn-red, .section-4-buttons .btn-yellow {
            width: 85%;
            margin-bottom: 15px;
        }
    }
</style>
<div class="page-content">
    <div class="section-top">
        <div class="content">
            <p>Dear Vancouverites</p>
            <p>SpotsHUB is striving to create a never-before-seen online shopping experience for online shoppers. I am asking all Vancouverites to show your direct support by shopping on SpotsHUB.</p>
            <p>Let us prove that SpotsHUB - A Canadian company created right here in Vancouver can become a world-class e-commerce platform competing head to head with our competitors around the world. I would like to invite you to experience SpotsHUB today by shopping with us.</p>
            <p>Win Tseng <br /> Founder & CEO of SpotsHUB</p>
        </div>
        <a href="/ferrari-f12-berlinetta-114-red">
        <img src="~/Content/images/berlinetta-4.jpg" />
            </a>
    </div>
    <div class="section-1">
        <img src="~/Content/images/berlinetta-1.jpg"/>
        <a href="/ferrari-f12-berlinetta-114-red" class="btn btn-danger">Attend Our Event</a>
    </div>
    <div class="section-2">
        <img src="~/Content/images/berlinetta-3.jpg">
        <div class="section-2-text">
            <h3>About Rastar</h3>
            <p>At Rastar, we strive to develop and manufacture top quality auto models for children of all ages. We are one of the top auto model manufacturers/exporters in China as we carry a wide range of products and manufacture at a mass scale.</p>
        </div>
    </div>
    <div class="section-3">
        <img src="~/Content/images/berlinetta-2.jpg">
        <a href="/ferrari-f12-berlinetta-114-red" class="btn btn-danger">Attend Our Event</a>
    </div>
    <div class="section-4">
        <a href="/ferrari-f12-berlinetta-114-red">
        <div class="col-xs-4 no-padding"><img src="~/Content/images/berlinetta-7.jpg"><h3>Drivable</h3></div>
        <div class="col-xs-4 no-padding"><img src="~/Content/images/berlinetta-5.jpg"><h3>Remote Control</h3></div>
        <div class="col-xs-4 no-padding"><img src="~/Content/images/berlinetta-6.jpg"><h3>So Real</h3></div>
        </a>
        <div class="clear"></div>

    </div>
    <div class="section-5">
        <a href="/ferrari-f12-berlinetta-114-red">
            <img src="~/Content/images/berlinetta-8.jpg">
        </a>
        <div class="content">
            <p><strong>Please Note</strong></p>
            <p>Dear shoppers, discount priicing of $199 will only be updated to our system by Oct 8th at 5pm PST</p>
            <p>Please make sure you refresh your browser when the time hits for the most updated pricing.</p>
            <p>We hope you will be that LUCKY owner of this luxury toy. Best luck to you all!</p>
            <p>*FREE delivery only valid for delivery addresses within Greater Vancouver & Fraser Valley area.</p>
        </div>
        <div class="clear"></div>
    </div>
</div>